<template>
  <div class="m-2">
    <a-layout has-sider>
      <!-- 左侧链接分类树 -->
      <a-layout-sider
        :style="{
          overflow: 'auto',
          height: '85vh',
          left: 0,
          top: 0,
          bottom: 0,
        }"
        theme="light"
        width="30%"
      >
        <a-tree
          @select="handleTree"
          default-expand-all
          :tree-data="treeData.child"
          :field-names="fieldNames"
          showLine
        />
      </a-layout-sider>

      <!-- 右侧链接表格 -->
      <a-layout>
        <a-layout-content :style="{ margin: '2px 16px 0', overflow: 'initial' }">
          <a-button
            style="margin: 0.2rem; float: right"
            type="success"
            :icon="h(PlusOutlined)"
            @click="handleAdd"
          >
            新增
          </a-button>
          <a-table :pagination="false" bordered :columns="columns" :data-source="data.treeData">
            <!-- ant3版本以后要用这种bodycell的方式去设置按钮，不然会有个warning警告， 显示内容会默认显示不用写text -->
            <template #bodyCell="{ text, record, column }">
              <!-- 链接地址 -->
              <a-button type="link" v-if="text === record.url">{{ text }}</a-button>
              <!-- 分类 -->
              <a-tag
                v-if="column.dataIndex === 'flag'"
                :color="text == 0 ? '#108ee9' : text == 5 ? 'default' : '#f50'"
              >
                {{ text == 0 ? '正常' : text == 5 ? '禁用' : '已删除' }}
              </a-tag>
              <!-- 操作按钮 -->
              <template v-else-if="column.dataIndex === 'operation'">
                <a-space>
                  <a-popconfirm
                    title="确认删除，一经确认不可撤回 ?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="onDelete(record)"
                  >
                    <a-button danger preIcon="ant-design:delete" type="link">删除</a-button>
                  </a-popconfirm>
                  <a-button preIcon="ant-design:edit" type="link" @click="onEdit(record)"
                    >修改</a-button
                  >
                </a-space>
              </template>
            </template>
          </a-table>
        </a-layout-content>
      </a-layout>
    </a-layout>

    <!-- 链接弹窗 -->
    <LinkModal ref="linksRef" />
  </div>
</template>

<script setup lang="ts">
  import { reactive, h, ref, provide } from 'vue';
  import { queryLinkCategory } from '/@/api/cms/linkcategory';
  import { queryLinks, deleteLink } from '/@/api/cms/link';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import LinkModal from './LinkModal.vue';

  const treeData = reactive({
    child: [
      {
        name: '链接分类树',
        id: '0-0-0',
        children: [],
      },
    ],
  });

  // 表格数据
  const data: any = reactive({
    tableData: [
      { cid: 90, flag: 98, id: 38, name: '务周没维天为', odr: 57, url: 'http://vybfiqew.tp/durv' },
    ],
  });

  // 表格的columns属性
  const columns = [
    {
      title: '链接名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '链接地址',
      dataIndex: 'url',
      key: 'url',
      align: 'center',
    },
    {
      title: '标记',
      dataIndex: 'flag',
      key: 'flag',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
    },
  ];

  const linksRef = ref<any>();
  const fieldNames = reactive({ children: 'children', title: 'name', key: 'id' });

  // 记录选择的链接分类ID
  const categoryId = ref();

  // 获取链接分类列表
  GetQueryCategoryLinks();
  function GetQueryCategoryLinks() {
    queryLinkCategory().then((res) => {
      treeData.child[0].children = res;
      categoryId.value = res[0].id;

      // 默认查询第一个分类列表的id
      getQueryLinks(categoryId.value);
    });
  }

  // 获取链接列表
  function getQueryLinks(cid) {
    console.log('queryLinks cid=', cid);
    //如果有传入cid使用传入值，否则使用记录的categoryId
    queryLinks({ id: cid ?? categoryId.value }).then((response) => {
      data.treeData = response;
    });
  }

  // 点击树触发
  const handleTree = (selectedKeys, _e: { selected: boolean; selectedNodes; node; event }) => {
    categoryId.value = selectedKeys[0];
    getQueryLinks(categoryId.value);
  };

  // 删除
  const onDelete = (record) => {
    deleteLink({ id: record.id })
      .then((res) => {
        message.success('删除成功');
        getQueryLinks(0);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  // 修改
  const onEdit = (record) => {
    linksRef.value.editInit(record);
    linksRef.value.showModal(treeData.child[0].children, 'edit');
  };

  // 新增
  const handleAdd = () => {
    linksRef.value.showModal(treeData.child[0].children, 'add');
  };

  provide('getQueryLinks', getQueryLinks);
</script>

<style lang="scss" scoped></style>
